<!--
 * @Author: 尹书延
 * @Date: 2021-11-23 18:33:21
 * @LastEditTime: 2021-11-29 11:06:31
-->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid 格子布局示例</title>
    <link rel="stylesheet" href="./dist/index.css" />
  </head>
  <body>
    <h2>经典布局的问题</h2>
    <!-- 定宽布局 -->
    <p>
      定宽布局，空隙宽度 14px
      <br />
      固定宽度：
      <input id="solid-width-setting" type="number" value="240" />
      px
      <br />
      width: var(--width);
    </p>
    <div id="solid-width" class="container"></div>
    <!-- 百分比布局 -->
    <p>
      经典的百分比布局，空隙宽度 1% (合适宽度：19.2%、11.625%、9.1%)
      <br />
      百分比：
      <input id="percent-setting" type="number" value="19.2" />
      %
      <br />
      width: var(--width);
    </p>
    <div id="percent" class="container"></div>
    <!-- 重点部分 -->
    <h2>Grid 格子布局</h2>
    <p>
      Grid 格子布局布局，空隙宽度
      1rem（格子布局可以方便地设置空隙宽度，每个按钮的宽度交由浏览器计算即可）
      <br />
      基准宽度：
      <input id="grid-setting" type="number" value="240" />
      px
      <br />
      grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
      <br />
      grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
    </p>
    <p>auto-fill</p>
    <div id="grid-auto-fill" class="container"></div>
    <p>
      auto-fit 实际上二者几乎没有区别，见
      <a
        target="_blank"
        href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat()"
        >MDN</a
      >
    </p>
    <div id="grid-auto-fit" class="container"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>
